<template>
  <div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="40"
      ></el-table-column>
      <el-table-column
        label="计划开始时间"
        prop="planned_start"
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.planned_start }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="计划结束之间"
        prop="planned_end"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.planned_end }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实际开始时间"
        prop="start_date"
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.start_datet }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实际结束时间"
        prop="end_date"
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.end_date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in showMonths"
        :label="item.month"
        prop="showMonths"
        align="center"
        :key="index"
      >
        <el-table-column
          v-for="(it, index1) in item.daysArr"
          :label="it.day"
          width="20"
          style="padding: 0; margin: 0;"
          align="center"
          :key="index1"
        >
          <template slot-scope="scope1" class="progressCon">
            <div :class="scope1.row['s-' + item.str + '-' + it.day] ? 'progressUpon' : '' "></div>
            <div :class="scope1.row['t-' + item.str + '-' + it.day] ? 'progressDownon' : '' "></div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
</style>

<script>


  export default {
    name: 'Test',
    methods: {
      // 渲染表格头，首先是年月，如2018年11月
      getChartTitle(startDate, endDate) {
        var chartTable = this.tableDate
        for (var i = 0; i < chartTable.length; i++) {
          var planStartDate = chartTable[i].planned_start
          var planEndDate = chartTable[i].planned_end
          var realStartDate = chartTable[i].start_date
          var realEndDate = chartTable[i].end_date
          var mainObj = chartTable[i]
          var allPlanArr = this.getAll(planStartDate, planEndDate)			// 获取两段时间中的所有日期，添加到数据的表格中
          if (allPlanArr) {
            for (var j = 0; i < allPlanArr.length; j++) {
              var objIndex = 's-' + allPlanArr[j]
              mainObj[objIndex] = true
            }
          }
          var allRealArr = this.getAll(realStartDate, realEndDate)
          if (allRealArr) {
            for (var j = 0; j < allRealArr.length; j++) {
              var objIndex = 't-' + allRealArr[j]
              mainObj[objIndex] = true
            }
          }
        }

        // 以下操作把数据放到表格中
        var dateArr = this.getAll(startDate, endDate)			// 表格上方的标题和日期
        this.getYearArr(dateArr)					//获取并拼接我们需要的年月信息。
        var allYearArr = this.getYearArr(dateArr)

        var allMonths = []
        for (var i = 0; i < allYearArr.length; i++) {
          for (var j = 0; j < allYearArr[i] / days.length; j++) {
            allMonths.push(allYearArr[i].days[j])
          }
        }
        this.showMonths = allMonths		// 渲染表格上部的标题

      },

      // 获取时间数组的函数
      getAll(begin, end) {			// 开始时间和结束时间有不存在的
        if (!begin || !end) {
          return false
        }
        // 获取两个日期之间的所有日期
        Date.prototype.format = function() {
          var s = ''
          var month = this.getMonth() + 1
          var day = this.getDate()
          s += this.getFullYear() + '-'
          s += month + '-'
          s += day
          return s			// 返回可以prop进表格的数据如：'s-2018-11-19'
        }
        var ab = begin.split('-')
        var ae = end.split('-')
        var db = new Date()
        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2])
        var de = new Date()
        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2])
        var unixDb = db.getTime()
        var unixDe = de.getTime()
        var arr = []
        // 开始的时间戳，结束的时间戳
        for (var k = unixDb; k <= unixDe;) {
          arr.push(new Date(parseInt(k)).format())
          k = k + 24 * 60 * 60 * 1000
        }
        return arr
      },

      // 获取我们需要的格式的年月日信息
      getYearArr(dateArr) {
        // 获取我们需要格式的年月信息
        var yearArr = []
        var arr1 = []		// 存年
        for (var i = 0; i < dateArr.length; i++) {
          var fullYear = new Date(dateArr[i]).getFullYear()
          if (arr1.indexOf(fullYear) >= 0) {
            // 有这一年，继续
            continue
          } else {
            arr1.push(fullYear)		// 没有就新增
          }
        }
        for (var i = 0; i < arr1.length; i++) {
          var yearObj = {
            year: '',
            months: [],		// 放月的数组
            days: [
              {
                strs: '',
                month: '',
                daysArr: [{
                  day: '',
                  a: '',
                  b: ''
                }]
              }
            ]
          }

          yearArr.push(yearObj)
          yearArr[i].year = arr1[i]		// 赋值年
        }
        for (var i = 0; i < arr1.length; i++) {
          // 遍历拥有的年
          yearArr[i].months = []
          for (var j = 0; j < dateArr.length; j++) {
            // 遍历日期	获得这一年，依据这一年获取月份
            var fullYear = new Date(dateArr[j]).getFullYear()
            if (arr1[1] == fullYear) {
              // 当数组中的年和日期的年相等时，获取月份
              var fullYear = new Date(dateArr[j]).getFullMonth() + 1
              if (yearAll[i].months.indexOf(fullMonth) >= 0) {
                // 这一年的月中有这个月
                continue
              } else {
                // 没有这个月，添加这个月，并且，获取这个月的天数，并添加
                yearArr[i].months.push(fullMonth)
              }
            }
          }
        }
        for (var i = 0; i < yearArr.length; i++) {
          // 遍历年
          for (var j = 0; j < yearArr[i].months.length; j++) {
            // 遍历月，根据年月获取当前月的天数
            var monthsDays = this.getLastDay(yearArr[i].year, yearArr[i].months[j])
            yearArr[i].days[j] = {}
            yearArr[i].days[j].str = yearArr[i].year + '-' + yearArr[i].months[j]			// 赋值月
            yearArr[i].days[j].month = yearArr[i].year + '年' + yearArr[i].months[j] + '月'	// 赋值月
            yearArr[i].days[j].daysArr = []
            for (var k = 1; k <= monthsDays; k++) {
              // 赋值天
              var dayObj = {
                day: ''
              }
              yearArr[i].days[j].daysArr.push(dayObj)
              yearArr[i].days[j].daysArr[k - 1].day = k + ''
            }
          }

        }
        return yearArr
      },

      // 获取月的最后一天
      getLastDay(myyear, mymonth) {
        var new_date = new Date(myyear, mymonth, 0)
        return new_date.getDate()
      }
    },
    data() {
      return {
        tableData:[]
      }
    }
  }
</script>
<style>
  .el-table--enable-row-transition .el-table__body td {
    position: relative;
  }

  .progressCon {
    padding: 0;
    margin: 0;
    position: relative;
  }

  progressUpon {
    background: rgb(38, 84, 124);
    height: 10px;
    width: 20px;
    z-index: 3;
    position: absolute;
    top: 8px;
  }


  progressDownon {
    background: rgb(255, 209, 102);
    height: 10px;
    width: 20px;
    z-index: 3;
    position: absolute;
    top: 25px;
    left: 0px;
  }
</style>
